<template>  
    <div style="display: flex;">
        <!-- 商品标题 商品ID 商家编码 输入框-->
        <div>
            <el-input v-model="goodsName" style="width: 250px;height: 45px" placeholder="商品名"></el-input>
        </div>
        <!-- 商品分类下拉选项框 -->
        <div class="shop_type">  
            <span style="color: rgb(168, 171, 178); margin-left: 10px; width: 100px;">商品分类</span>  
            <el-cascader 
                placeholder="您可以尝试输入您想要查询的类别"
                :options="goodsType"
                :props="props"
                filterable
                v-model="goodsTypeValue"
                @change="getTableDate"
                style="width: 260px;"
                />
        </div>
         
    </div>
   
    <div style="display: flex; margin-top: 10px;">
      <div >
        <!-- 批量删除按钮 -->
        <el-button class="delete" type="danger" @click="batchDel">批量删除</el-button>
      </div >
      <div style="margin-left:10px;">
        <!-- 搜索按钮 -->
        <el-button class="search" type="primary" @click="getTableDate">搜索</el-button>
      </div>
      <div style="margin-left:10px;">
          <el-button class="reset_sort" type="primary" @click="clearType">分类重置</el-button>
        </div> 
      <div style="margin-left:10px;">
        <el-button class="sort" type="primary"  @click="toggleSort">设置排序</el-button>
      </div>
      <div>
        <!-- 排序方式 -->
      <sort 
        style="margin-left: 20px;" 
        v-if="click_sort"
        v-model:sortRule="sortRule"
        @change="getTableDate"></sort>
      </div>
    </div>
   <div style="height: 521px;">
        <!-- 商品信息展示列表 -->
      <el-table 
        ref="multipleTableRef"
        class="el-tb" 
        header-row-class-name="tb-header" 
        :data="rawData.records"
        @selection-change="handleSelectionChange"  
        row-key="id"    
        max-height="900px">
          <el-table-column label-class-name="first-column" type="selection" width="55px"></el-table-column>
          <el-table-column label="" width="100px" fixed>
            <template #default="scope">  
              <el-image :src="Path.imgPath + scope.row.imgs" alt="商品图片" style="width: 50px; height: 50px;"/>  
            </template> 
          </el-table-column>
          <el-table-column fixed prop="name" label="商品名称" width="400px">
            <template #header>  
            <span>商品名称 </span> <!-- 假设你想在表头旁边添加一个箭头 -->  
        </template>  
          </el-table-column>
          <el-table-column prop="price" label="价格" width="150px" />
          <el-table-column prop="store" label="库存" width="150px" />
          <el-table-column prop="sales" label="累计销量" width="150px" />
          <el-table-column prop="createTime" label="创建时间" width="200px" />
          <el-table-column label="操作" label-class-name="end-column" width="150px">  
            <template #default="scope">  
              <el-button  
                size="small"  
                type="danger"  
                @click="handleDelete(scope.row.id)" 
              >  
                删除  
              </el-button>  
            </template>  
          </el-table-column>  
        </el-table>
   </div> 
     <div class="example-pagination-block">
          <el-pagination 
          @size-change="getTableDate"  
            @current-change="getTableDate"  
            v-model:current-page="currentPage"   
            :page-size="pageSize"  
            layout="total, prev, pager, next, jumper"  
            :total="rawData.total"
            background
          />
        </div>
  
</template>

<script setup>
import { ref } from 'vue';
import { get,post } from "@/plugins/axios"
import { Path } from "@/constant/index"
import sort from '@/views/shop-grc/component/sort.vue'
import { ElMessage } from 'element-plus';

// 当前页码  
const currentPage = ref(1);  
// 每页显示的条目数  
const pageSize = ref(6);
// 弹出框
const selectedOption = ref('');  
const popoverVisible = ref(false);

const rawData = ref([])

// 多选部分
// 用于存储被选中的行  
const selectedRows = ref([]);    
const selectedIds = [];
// Element UI 的 ref 引用  
const multipleTableRef = ref(null); 
// 处理选择变更的事件  
function handleSelectionChange(val) {  
  selectedRows.value = val; // val 是被选中的行的 keys 数组（如果设置了 row-key）  
  console.log(selectedRows.value); // 查看被选中的行的 keys  
}  
function batchDel(){
  if(selectedRows.value.length == 0){
    ElMessage.warning("请进行选择")
    return
  }
  const selectedIds = [];    
  for (const row of selectedRows.value) {   
    selectedIds.push(row.id);  
  } 
  post(Path.businessUpdateGoodsStateBatch,{
    ids: selectedIds,
    stateUser: -1 
  },content => {
    getTableDate()
  })
}


// 排序部分
const sortRule = ref([])
const goodsTypeValue = ref(null)
const goodsName = ref(null)
getTableDate()
function getTableDate(){
  get(Path.businessGetGoods,{
    pageNo: currentPage.value,
    pageSize: pageSize.value,
    sortType: sortRule.value[0],
    sortDetail: sortRule.value[1],
    typeId: goodsTypeValue.value,
    goodsName: goodsName.value, 
  }, content => {
    rawData.value = content
  })
}
  
// 分类部分
const goodsType = ref([])
getGoodsType()
const props = {
  multiple: false,
  emitPath: false,
  label: 'name',
  value: 'id',
  children: 'children',
  expandTrigger: 'click'
}
// 获取数据
function getGoodsType(){
  get(Path.categoryList,null,content => {
    goodsType.value = content
  })
}
function clearType(){
  goodsTypeValue.value = null;
  getTableDate()
}
  

//排序选项框
const click_sort = ref(false)
// 切换排序显示状态  
function toggleSort() {  
  click_sort.value = !click_sort.value; // 如果click_sort是0，则变为1；如果是1，则变为0  
  console.dir(click_sort.value)
}

function handleEdit(row){
    console.log(row);
}
function handleDelete(id){
    post(Path.businessUpdateGoodsState,{
      id: id,
      state: -1
    }, content => {
      getTableDate()
    })
}


</script>

<style lang="scss" scoped>

/* 
  表头
*/
.el-tb {
  ::v-deep .tb-header {
    border-radius: 15px;
    overflow: hidden;
    th {
      background-color: #f2f4f7;
      color: #000;
      font-size: medium;
      height: 61px;
    }
    .first-column {
      border-radius: 20px 0 0 20px;
    }
    .end-column {
      border-radius: 0 20px 20px 0;
    }
  }
}


//店铺类型样式
.shop_type{
    margin-left: 4%; 
    background-color: #f2f4f7;
    display: flex;
    align-items: center; 
    text-align: center;
    border: 1px solid #dcdfe6; // 添加默认边框
    border-radius: 8px;;
}
.shop_type:hover{
    background-color: #ffffff;
  border-color: #409eff; 
  transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
}


// 输入框样式和触发事件
::v-deep .el-input__wrapper {
    background-color: #f2f4f7;
    border-radius: 5px;
    border: 1px solid #dcdfe6; // 添加默认边框
    border-radius: 8px;
   
  }
::v-deep .el-input__wrapper:hover {
  background-color: #ffffff;
  border-color: #409eff; 
  transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
}
// 店铺选项样式
.my-dropdown-menu {
  background-color: #f2f4f7;
  padding: 0;
  margin: 0;
  list-style: none;
  border-width: 0;
  border-color:#f2f4f7 ;

  .my-dropdown-item {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f2f4f7;
    &:hover {
      background-color: #fff;
      transition: background-color 0.3s ease, border-color 0.3s ease; 
    }
  }
}

// 请选择 字体的样式
.el-dropdown-link{
    width: 200px;
    font-size: large; 
    margin-left: 5%;
}

// 商品字段展示框的样式
.show_product{
    width: 1400px;
    height: 61px;
    background-color:  #f2f4f7;
    border-radius: 18px;
    margin-top: 20px;
    display: flex;
    align-items: center;
}

// 搜索按钮样式
.search{
    width: 88px;
    height: 36px;
    margin-top: 1%;
    margin-bottom: 20px;
    border-radius: 15px;
}
// 删除按钮样式
.delete{
  width: 88px;
  height: 36px;
  margin-top: 1%;
  border-radius: 15px;
  margin-bottom: 20px;
}
.reset_sort{
  width: 88px;
  height: 36px;
  margin-top: 2%;
  border-radius: 15px;
}
// 排序按钮样式
.sort{
  width: 88px;
  height: 36px;
  margin-top: 1%;
  border-radius: 15px;
  margin-bottom: 20px;
}

//分页的样式
.example-pagination-block {
  margin-top: 10px;
  display: flex;
  margin-left: 450px;
  height: 50px;
  margin-bottom: 16px;
}
</style>